import React, { useState } from 'react';
import { NavLink } from 'react-router-dom'
import { LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
import { Avatar, List, Space } from 'antd';
import { Tabs } from 'react-vant'
const items = Array.from({ length: 3 }, (_, i) => i + 1)

const data = Array.from({ length: 23 }).map((_, i) => ({
    href: './Kind',
    title: `我这小丑般的7年开发生涯 ${i}`,
    avatar: `https://api.dicebear.com/7.x/miniavs/svg?seed=${i}`,
    description:
        '我在公司做的大部分是探索性创新行的需求,行内人都知道那种活都是那种脏活累活,需求变化大......',
    content:
        '在工作中我们通常需要封装一些函数组件',
}));

const IconText = ({ icon, text }: { icon: React.FC; text: string }) => (
    <Space>
        {React.createElement(icon)}
        {text}
    </Space>
);

function Home() {

    return (
        <div>
            <Tabs defaultActive={2}>
                {items.map(item => (
                    <Tabs.TabPane key={item} title={`标签${item}`}>
                        <List
                            itemLayout="vertical"
                            size="large"
                            pagination={{
                                onChange: (page) => {
                                    console.log(page);
                                },
                                pageSize: 6,
                            }}
                            dataSource={data}
                            renderItem={(item) => (
                                <List.Item
                                    key={item.title}
                                    actions={[
                                        <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
                                        <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
                                        <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
                                    ]}
                                    extra={
                                        <NavLink to={'/kind'}>
                                            <img
                                                width={170}
                                                alt="logo"
                                                src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                                            />
                                        </NavLink>

                                    }
                                >
                                    <List.Item.Meta
                                        avatar={<Avatar src={item.avatar} />}
                                        title={<a href={item.href}>{item.title}</a>}
                                        description={item.description}
                                    />
                                    {item.content}
                                </List.Item>
                            )}
                        />
                    </Tabs.TabPane>
                ))}
            </Tabs>
        </div>
    );
}

export default Home;
